<template>
  <div class="contact">
    <el-card class="contact-card" :body-style="{padding: '0px'}">
      <img src="/static/images/head.jpg">
      <div class="contact-card-desc">
        <div class="text name">L-Chris</div>
        <div class="text">563303226@qq.com</div>
        <div class="text">番禺/广州/中国</div>
        <div class="text link">
          <a href="https://github.com/L-Chris">https://github.com/L-Chris</a>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped lang="scss">
.contact {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  &-card {
    border: none;
    width: 400px;
    &-desc {
      padding: 1rem;
      text-align: left;
      .text {
        font-size: 1.5rem;
        padding-top: 0.5rem;
      }
      .name {
        font-size: 2rem;
      }
      .link {
      }
    }
  }
}
</style>
